<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // 普通数据源：
  var arr = [
    { id: '1', name: '北京', pid: '' },

    { id: '11', name: '朝阳', pid: '1' },

    { id: '111', name: '朝阳群众1', pid: '11' },
    { id: '112', name: '朝阳群众2', pid: '11' },

    { id: '12', name: '顺义', pid: '1' },

    { id: '121', name: '顺义群众1', pid: '12' },
    { id: '122', name: '顺义群众2', pid: '12' },

    { id: '2', name: '深圳', pid: '' },

    { id: '21', name: '南山', pid: '2' },

    { id: '211', name: '南山群众1', pid: '21' },
    { id: '212', name: '南山群众2', pid: '21' },

    { id: '22', name: '宝安', pid: '2' },
    
    { id: '221', name: '宝安群众1', pid: '22' },
    { id: '222', name: '宝安群众2', pid: '22' }
  ]
  // 思路：数据一共分为三层：
  //  一级：pid = ""
  //  二级：pid = "一级 id"
  //  三级: pid = "二级 id"
  //  四级： 
  //  ....
  // 定义一个新的数组
  var newArr = []
  // 先得到一级数据
  arr.forEach(item1 => {
    if (item1.pid === '') {
      // 只要进入判断 item1 就是一级
      // 定义一个一级的 children
      var children1 = []
      // 再找到当前一级下的二级元素
      arr.forEach(item2 => {
        if (item2.pid === item1.id) {
          // 只要进入判断 item2 就是二级
          // 定义一个二级的 children
          var children2 = []
          // 再找到当前二级下的三级元素
          arr.forEach(item3 => {
            if (item3.pid === item2.id) {
              // 三级元素
              children2.push(item3)
            }
          })
          // 将三级添加到二级中
          item2.children = children2
          children1.push(item2)
        }
      })
      // 将二级添加到一级中
      item1.children = children1
      // 将一级添加到数据组中
      newArr.push(item1)
    }
  })
  console.log(newArr);
  // 目标：
  // var arr = [
  //   {
  //     id: '1', name: '北京', pid: '', children: [
  //       {
  //         id: '11', name: '朝阳', pid: '1', children: [
  //           { id: '111', name: '朝阳群众1', pid: '11' },
  //           { id: '112', name: '朝阳群众2', pid: '11' },
  //         ]
  //       },
  //       {
  //         id: '12', name: '顺义', pid: '1', children: [
  //           { id: '121', name: '顺义群众1', pid: '12' },
  //           { id: '122', name: '顺义群众2', pid: '12' },

  //         ]
  //       },
  //     ]
  //   }
  // ]
</script>

</html>